<template>
    <div class="tabsWrap">
        <el-tabs 
			v-model="activeName" 
			type="border-card"
			@tab-click="handleClick">
            <el-tab-pane label="标签一" name="tabsOne">
                <tabsOneTabComponent v-if="activeName == 'tabsOne'"></tabsOneTabComponent>
            </el-tab-pane>
            <el-tab-pane label="标签二" name="tabsTwo">
                <tabsTwoTabComponent v-if="activeName == 'tabsTwo'"></tabsTwoTabComponent>
            </el-tab-pane>
		</el-tabs>
    </div>
</template>
<script setup>
import tabsOneTabComponent from './tabsComponent/tabsOneComponent.vue';
import tabsTwoTabComponent from './tabsComponent/tabsTwoComponent.vue';
import { ref } from 'vue'
/* —— data ———————————————————— */
//reactive只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)
let activeName = ref('tabsOne')
function handleClick(tab, event){
    console.log(tab, event);
};
</script>
<style type="text/css" lang="less" scoped>
.tabsWrap {
}
</style>